<template>
  <div class="agents-container">
    <div class="app-container">
      <!-- 头部 -->
      <el-card>
        <el-row type="flex" justify="space-between">
          <el-col><el-button type="primary" @click="addAgentsFn">添加经纪</el-button>
          </el-col>

          <!-- 搜索输入框 -->
          <el-col>
            <el-input v-model="sreach" placeholder="请输入内容">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="sreachFn"
              />
            </el-input>
          </el-col> </el-row></el-card>

      <!-- 弹框组件 -->

      <agentsEdit
        ref="dialogAgentForm"
        :dialog-agent.sync="dialogAgent"
        :title="title"
        @refresh="refreshFn"
      />

      <!-- 内容 -->
      <el-card>
        <!-- 表格组件 -->
        <el-table :data="agentsList" border style="width: 100%">
          <el-table-column prop="image" label="图片" width="170px" sortable="">
            <template v-slot="{ row }">
              <img :src="row.image" alt="头像" class="staff-Photo">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="address" label="地址" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="primary" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="size"
            :current-page="page"
            @current-change="currentChangeFn"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { agentsList, agentsCount, deleteAgents } from '@/api/agents'
import agentsEdit from './components/agents-edit.vue'
export default {
  components: {
    agentsEdit
  },
  data() {
    return {
      agentsList: [],
      agentsId: null,
      total: null,
      page: 1, // 第1页
      size: 2, // 每页获取条数
      nameContains: '', // 模糊搜索
      dialogAgent: false, // 是否显示弹框
      sreach: '', // 绑定搜索
      title: '' // 弹框标题
    }
  },
  created() {
    this.getAgentsList()
  },
  methods: {
    // 获取经纪员工列表和数量
    async getAgentsList() {
      // 获取经纪员工列表数量
      this.total = await agentsCount({ name_contains: this.nameContains })
      console.log('获取经纪员工列表数量', this.total)

      // 获取经纪员工列表
      const start = (this.page - 1) * this.size
      // console.log(start)
      const res = await agentsList({
        _limit: this.size, // 每页获取条数
        _start: start,
        name_contains: this.nameContains
      })
      console.log('获取经纪员工列表', res)
      this.agentsList = res
      this.agentsId = res.id
    },

    // 点击页码，触发的函数
    currentChangeFn(page) {
      console.log(page)
      // 获取新一页数据
      this.page = page
      this.getAgentsList()
    },

    // 点击添加按钮，弹出弹框
    addAgentsFn() {
      this.dialogAgent = true
      this.title = '添加经纪'
    },

    // 监听到子组件添加经纪，重新获取数据
    refreshFn() {
      this.page = 1
      this.getAgentsList()
    },

    // 点击删除按钮
    async delFn(id) {
      console.log('删除经纪', id)
      await deleteAgents(id)
      this.$message.warning('删除经纪成功')

      // 重新刷新页面
      this.refreshFn()
    },

    // 点击编辑按钮
    async editFn(id) {
      // 弹出弹框
      this.dialogAgent = true
      this.title = '编辑经纪'
      this.$refs.dialogAgentForm.getAssignAgents(id)
    },

    // 点击搜索按钮
    async sreachFn() {
      // console.log(this.sreach)
      // 调用模糊搜索接口函数
      this.nameContains = this.sreach
      console.log(147, this.nameContains)
      this.page = 1
      await this.getAgentsList()
      this.sreach = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.staff-Photo {
  width: 170px;
  height: 120px;
  object-fit: contain;
}
</style>
